<template>
  <div class="item-card">
    <el-form label-width="80px" size="small">
      <el-popover
        placement="left"
        title="转换说明"
        width="200"
        trigger="hover"
        content="Cesium.Cartesian3.fromDegrees(longitude, latitude, height)">
        <div><strong>角度形式</strong></div>
        <div>let cartesian3 = new Cesium.Cartesian3(-2654980.3753, 5350650.6921, 4968376.0834)</div>
        <div>let cartographic = Cesium.Cartographic.fromCartesian(cartesian3)</div>
        <div>Cesium.Math.toDegrees(cartographic.longitude),Cesium.Math.toDegrees(cartographic.latitude),cartographic.height</div>
        <div><strong>弧度形式</strong></div>
        <div>let cartesian3 = new Cesium.Cartesian3(-2654980.3753, 5350650.6921, 4968376.0834)</div>
        <div>let cartographic = Cesium.Cartographic.fromCartesian(cartesian3)</div>
        <div>cartographic.longitude,cartographic.latitude,cartographic.height</div>
        <h5 slot="reference" class="item-title">笛卡尔空间坐标转WGS-84坐标</h5>
      </el-popover>
      <el-tabs v-model="activeName">
        <el-tab-pane label="单个" name="first">
          <el-form-item label="X">
            <el-input v-model="form.x" @change="handleResolveCar(form.x)" placeholder="请输入内容"></el-input>
          </el-form-item>
          <el-form-item label="Y">
            <el-input v-model="form.y" placeholder="请输入内容"></el-input>
          </el-form-item>
          <el-form-item label="Z">
            <el-input v-model="form.z" placeholder="请输入内容"></el-input>
          </el-form-item>
          <div class="text-right item-transform">
            <el-button @click="to1" type="primary" size="mini">角度形式</el-button>
            <el-button @click="to2" type="primary" size="mini">弧度形式</el-button>
          </div>
          <el-form-item label="经度">
            <el-input v-model="form.lng" placeholder="请输入内容"></el-input>
          </el-form-item>
          <el-form-item label="纬度">
            <el-input v-model="form.lat" placeholder="请输入内容"></el-input>
          </el-form-item>
          <el-form-item label="高度">
            <el-input v-model="form.height" placeholder="请输入内容"></el-input>
          </el-form-item>
        </el-tab-pane>
        <el-tab-pane label="多组" name="second">
          <el-form-item label="集合">
            <el-input v-model="form.input" type="textarea" rows="6" placeholder="示例：[[-2654980.375354672,5350650.692183396,4968376.083493721]]或[{x:-2654980.375354672,y:5350650.692183396,z:4968376.083493721}]"></el-input>
          </el-form-item>
          <div class="text-right item-transform">
            <el-button @click="toList1" type="primary" size="mini">角度形式</el-button>
            <el-button @click="toList2" type="primary" size="mini">弧度形式</el-button>
          </div>
          <el-form-item label="集合">
            <el-input v-model="form.output" type="textarea" rows="6" placeholder="请输入内容"></el-input>
          </el-form-item>
        </el-tab-pane>
      </el-tabs>
    </el-form>
  </div>
</template>

<script>
import * as Cesium from 'cesium'
import { parser } from '@daelui/dogjs/dist/components.js'

export default {
  name: 'wgs-to-cartesian',

  data () {
    return {
      activeName: 'first',
      form: {
        lng: 116.3905,
        lat: 39.9084,
        height: 1400000,
        x: -2654980.375354672,
        y: 5350650.692183396,
        z: 4968376.083493721,
        input: '[[-2654980.375354672,5350650.692183396,4968376.083493721]]',
        output: '[[116.3905,39.9084,1400000]]'
      }
    }
  },

  methods: {
    to1 () {
      let cartesian3 = new Cesium.Cartesian3(parseFloat(this.form.x), parseFloat(this.form.y), parseFloat(this.form.z))
      let cartographic = Cesium.Cartographic.fromCartesian(cartesian3)
      this.form.lng = Cesium.Math.toDegrees(cartographic.longitude)
      this.form.lat = Cesium.Math.toDegrees(cartographic.latitude)
      this.form.height = cartographic.height
    },
    to2 () {
      let cartesian3 = new Cesium.Cartesian3(parseFloat(this.form.x), parseFloat(this.form.y), parseFloat(this.form.z))
      let cartographic = Cesium.Cartographic.fromCartesian(cartesian3)
      this.form.lng = cartographic.longitude
      this.form.lat = cartographic.latitude
      this.form.height = cartographic.height
    },
    toList1 () {
      let list = parser.parse(this.form.input)
      if (!Array.isArray(list)) {
        this.$message({
          type: 'error',
          message: '数据非数组'
        })
        return true
      }
      list = list.map(item => {
        let isObj = !Array.isArray(item) && isNaN(parseFloat(item[0]))
        let x = isObj ? parseFloat(item.x) : parseFloat(item[0])
        let y = isObj ? parseFloat(item.y) : parseFloat(item[1])
        let z = isObj ? parseFloat(item.z) : parseFloat(item[2]) || 1
        let cartesian3 = new Cesium.Cartesian3(x, y, z)
        let cartographic = Cesium.Cartographic.fromCartesian(cartesian3)
        let lng = Cesium.Math.toDegrees(cartographic.longitude)
        let lat = Cesium.Math.toDegrees(cartographic.latitude)
        let alt = cartographic.height
        let data = isObj ? 
        {
          lng: lng,
          lat: lat,
          alt: alt
        } : [
          lng,
          lat,
          alt
        ]
        return data
      })
      this.form.output = parser.stringify(list)
    },
    toList2 () {
      let list = parser.parse(this.form.input)
      if (!Array.isArray(list)) {
        this.$message({
          type: 'error',
          message: '数据非数组'
        })
        return true
      }
      list = list.map(item => {
        let isObj = !Array.isArray(item) && isNaN(parseFloat(item[0]))
        let x = isObj ? parseFloat(item.x) : parseFloat(item[0])
        let y = isObj ? parseFloat(item.y) : parseFloat(item[1])
        let z = isObj ? parseFloat(item.z) : parseFloat(item[2]) || 1
        let cartesian3 = new Cesium.Cartesian3(x, y, z)
        let cartographic = Cesium.Cartographic.fromCartesian(cartesian3)
        let lng = cartographic.longitude
        let lat = cartographic.latitude
        let alt = cartographic.height
        let data = isObj ? 
        {
          lng: lng,
          lat: lat,
          alt: alt
        } : [
          lng,
          lat,
          alt
        ]
        return data
      })
      this.form.output = parser.stringify(list)
    },
    handleResolveCar (value) {
      if (/,/.test(value)) {
        let values = value.split(',')
        if (values[0]) {
          this.form.x = values[0]
        }
        if (values[1]) {
          this.form.y = values[1]
        }
        if (values[2]) {
          this.form.z = values[2]
        }
      }
    }
  }
}
</script>

<style lang="less">
.item-card {
  padding: 8px;
  border: 1px solid #eee;
  border-radius: 4px;
}
.item-transform {
  margin-bottom: 8px;
}
.item-title {
  margin: 0;
  padding: 0 0 8px;
}
</style>